<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <title>字段管理</title>

    <link rel="stylesheet" type="text/css" href="/src/css/themes/default.css"/>
    <!-- iview样式 -->
    <link rel="stylesheet" type="text/css" href="/plugins/iview/css/iview.css"/>
    <!--@import url("//unpkg.com/iview/dist/styles/iview.css");-->
    <!--<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>-->
    <!-- 引入layui样式 -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/plugins/popover/popover.css">
    <!--   <script src="//unpkg.com/vue/dist/vue.js"></script>
       <script src="//unpkg.com/iview/dist/iview.min.js"></script>-->
    <!-- 引入vue -->
    <script type="text/javascript" src="/plugins/vue/vue.min.js"></script>
    <!-- iview js -->
    <script type="text/javascript" src="/plugins/iview/js/iview.js"></script>
    <script src="/properties/config.js"></script>
    <!--引入layui.js-->
    <script src="/plugins/layui/layui.js"></script>
    <!--引入axios.js 用于ajax调用-->
    <script src="/plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="/plugins/jquery-1.9.1.min.js"></script>
    <script src="/build/js/appToken.js"></script>
    <script src="/plugins/popover/popover.js"></script>
    <script src="/src/js/wangEditor.js"></script>
</head>
<body>
<!--隐藏元素-->
<!--<p id="staffType"  th:attr="value=${staffType}"  hidden />-->
<!--使用v-cloak技术，在vue渲染完毕前隐藏页面，渲染完成后显示-->
<div id="app" v-cloak>
    <row style="padding: 10px">
        <i-col span="24">
            <Card>
                <row :gutter="16">
                    <i-form ref="saveForm" :model="saveForm" label-position="right" :label-width="100"
                            :rules="ruleValidate">
                        <i-col span="8">
                            <form-item label="招聘类别：" prop="typeId">
                                <i-select v-model="saveForm.typeId" filterable style="width: 176px">

                                    <i-option value="1">技术</i-option>
                                    <i-option value="2">职能</i-option>
                                    <i-option value="3">业务</i-option>
                                    <i-option value="4">其它</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="岗位名称：" prop="stationName">
                                <i-input v-model="saveForm.stationName" placeholder="岗位名称" maxlength="20"
                                         style="width: 176px"></i-input>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="工作地点：" prop="stationPlace">
                                <i-select v-model="saveForm.provinceId" @on-change='queryCitye(saveForm.provinceId)'
                                          style="width: 100px">
                                    <i-option v-for="item in provinces" :value="item.id" :key="item.id">{{ item.name
                                        }}
                                    </i-option>

                                </i-select>
                                <i-select v-model="saveForm.stationPlace" filterable style="width: 100px">
                                    <i-option v-for="item in citys" :value="item.id" :key="item.id">{{ item.name }}
                                    </i-option>

                                </i-select>

                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="薪资范围：" prop="stationSalary">
                                <i-input v-model="saveForm.stationSalary" placeholder="薪资范围" maxlength="30"
                                         style="width: 176px"></i-input>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="招聘人数：" prop="stationNumber">
                                <i-input v-model="saveForm.stationNumer" placeholder="招聘人数" maxlength="30"
                                         style="width: 176px"></i-input>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="状态：" prop="state">
                                <i-select v-model="saveForm.state" filterable style="width: 176px">
                                    <i-option value="0">启用</i-option>
                                    <i-option value="1">停用</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                        <i-col span="16">
                            <form-item label="生效时间：" prop="endTime">
                                <date-picker type="date" :value="saveForm.estartTime" @on-change="getStartTime"
                                             placeholder="选择日期"
                                             format="yyyy-MM-dd"
                                             style="width: 200px"></date-picker>
                                <span>至</span>
                                <date-picker type="date" :value="saveForm.eendTime" @on-change="getEndTime"
                                             placeholder="选择日期"
                                             format="yyyy-MM-dd"
                                             style="width: 200px"></date-picker>
                                </span>
                            </form-item>
                        </i-col>
                        <i-col span="24">
                            <div>
                                <span slot="label">岗位职责</span>
                                <div id="stationDuty">
                                </div>
                            </div>
                            <div>
                                <span slot="label">任职资格</span>
                                <div id="stationSeniority">
                                </div>
                            </div>
                        </i-col>
                        <i-col span="24">
                            <row style="margin: 50px;text-align: center;">
                                <i-button type="info" @click="tosave('saveForm')">
                                    <span>保存</span>
                                </i-button>
                                <i-button type="info" @click="closeOpt">
                                    <span>取消</span>
                                </i-button>

                            </row>
                        </i-col>

                    </i-form>
                </row>

            </Card>
        </i-col>
    </row>


</div>


<script src="/src/js/comm.js"></script>
<script>

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  // 匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; // 返回参数值
    }


    var id = getUrlParam('id');


    var layer;
    var table;
    var basePath;
    var vm;
    var tableColum;
    var E;
    var editor1;
    var editor2;
    var provinces;
    var citys;
    var preCreateName;
    var time = '';
    window.layinit(function (htConfig) {
        var _htConfig = htConfig;
        basePath = _htConfig.coreBasePath;
        uiBasePath = _htConfig.uiBasePath;
        E = window.wangEditor
        editor1 = new E('#stationSeniority');
        editor2 = new E('#stationDuty');
        $.ajax({
            type: "GET",
            url: basePath + "/recruit/getProviceCity",
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            success: function (result) {
                console.log("结果：========", result);
                if (result.returnCode == "0") {
                    provinces = result.data;
                    console.log("provinces=", provinces);
                } else {
                    console.log("获取省市异常=", result.returnCode);
                }

            },
            error: function (result) {
            }

        });

        $.get(_htConfig.loadSelfinfoUrl, null, function (result) {
            //表单数据填充
            if (result.result) {
                preCreateName = result.result.userName;
            }
        });
        vm = new Vue({
            el: '#app',
            data() {
                const validateMobile = (rule, value, callback) => {

                    if (!Number.isInteger(+value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        callback();
                    }
                };
                return {
                    ruleValidate: {
                        typeId: [
                            {required: true, message: '招聘类别不能为空', trigger: 'blur'},

                        ],
                        stationName: [
                            {required: true, message: '岗位名不能为空', trigger: 'blur'},
                            {type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur'},
                        ],
                        stationPlace: [
                            {required: true, message: '工作地点不能为空', trigger: 'blur'},
                        ],
                        endTime: [
                            {required: true, message: '生效时间不能为空', trigger: 'blur'},
                        ],
                        stationSalary: [
                            {type: 'string', max: 300, message: '不能超过20个字符', trigger: 'blur'},
                        ],
                        stationNumer: [
                            {type: 'number', message: '不能超过20个字符', trigger: 'blur'},
                            {validator: validateMobile, trigger: 'blur'}
                        ],

                        state: [
                            {required: true, message: '状态不能为空', trigger: 'blur'},
                        ],
                    },
                    provinces: provinces,
                    saveForm: {
                        typeId: '',  //类型ID
                        stationName: '', // 岗位名
                        stationPlace: '', // 工作地
                        provinceId: '', // 省份ID
                        stationSalary: '', // 薪资范围
                        stationNumer: '', // 人数
                        startTime: null, // 开始时间
                        endTime: null, // 结束时间
                        estartTime: null, // 结束时间
                        eendTime: null, // 结束时间
                        state: '', // 状态
                        opType: '', // 状态
                        stationSeniority: '',
                        stationDuty: '',
                        id: '',
                        createName: ''
                    }
                }
            },
            methods: {
                init: function () {

                    editor1.customConfig.zIndex = 100;
                    editor1.create();

                    editor2.customConfig.zIndex = 100;
                    editor2.create();
                    layui.use(['layer', 'table', 'ht_ajax', 'ht_auth', 'ht_config'], function () {
                        layer = layui.layer;
                    })

                    if (id != null && id != '') {
                        var url = basePath + "recruit/recruitQuery?id=" + id;
                        var that = this;
                        $.ajax({
                            type: "GET",
                            url: url,
                            contentType: "application/json; charset=utf-8",
                            async: false,
                            dataType: "json",
                            success: function (result) {
                                console.log("结果11：========", result);
                                if (result.returnCode == "0") {
                                    var data = result.data;
                                    that.saveForm.typeId = data.typeId; //类型ID

                                    that.saveForm.stationName = data.stationName;// 岗位名
                                    that.saveForm.provinceId = data.provinceId; // 省份ID
                                    that.queryCitye(data.provinceId);
                                    that.saveForm.stationPlace = data.stationPlace; // 工作地
                                    that.saveForm.stationSalary = data.stationSalary; // 薪资范围
                                    that.saveForm.stationNumer = data.stationNumer; // 人数
                                    that.saveForm.estartTime = data.startTime; // 开始时间
                                    that.saveForm.startTime = data.startTime; // 开始时间

                                    that.saveForm.eendTime = data.endTime; // 结束时间
                                    that.saveForm.endTime = data.endTime; // 结束时间
                                    that.saveForm.state = data.state; // 状态
                                    that.saveForm.opType = data.opType; // 状态
                                    editor1.txt.html(data.stationSeniority);
                                    editor2.txt.html(data.stationDuty);
                                }
                            }
                        });
                    }
                },


                queryCitye: function (provinceId) {
                    $.ajax({
                        type: "GET",
                        url: basePath + "/recruit/getProviceCity?provinceId=" + provinceId,
                        contentType: "application/json; charset=utf-8",
                        async: false,
                        dataType: "json",
                        success: function (result) {
                            console.log("结果：========", result);
                            if (result.returnCode == "0") {
                                citys = result.data;
                                console.log("获取的city=", citys);

                            }

                        },
                        error: function (result) {
                            vm.$Message.error('接口调用异常!');
                        }

                    });
                },
                toend: function () {
                    this.$refs['saveForm'].resetFields();
                },
                getStartTime: function (starttime) {
//                    if (time == '') {
//                        time = starttime;
//                    }
//                    else if (time < starttime) {
//                        layer.msg("开始时间不能晚于结束时间!");
//                        console.log("ssss=",this.saveForm.estartTime);
//                        this.saveForm.estartTime = '';
//                        time == '';
//                        return false;
//                    }
                    this.saveForm.startTime = starttime;
                    this.saveForm.estartTime = starttime;

                },
                getEndTime: function (endtime) {
//                    if (time == '') {
//                        time = endtime;
//
//                        layer.msg("正常时间!");
//                    } else if (time > endtime) {
//                        layer.msg("开始时间不能晚于结束时间!");
//                        console.log("ddddd=", this.saveForm.eendTime);
//                        this.saveForm.eendTime = '';
//                        time == '';
//                        return false;
//                    }
                    this.saveForm.endTime = endtime;
                    this.saveForm.eendTime = endtime;
                },
                tosave: function (name) {
                    var self = this;
                    if (id != null && id != '') { //修改
                        self.saveForm.opType = 2;
                        self.saveForm.id = id;
                        self.saveForm.stationSeniority = editor1.txt.html();
                        self.saveForm.stationDuty = editor2.txt.html();


                        var data = JSON.stringify(self.saveForm);
                        console.log("====获取到的值是", data);
                        $.ajax({
                            type: "POST",
                            url: basePath + "/recruit/addOrEditRecruit",
                            contentType: "application/json; charset=utf-8",
                            async: false,
                            data: data,
                            dataType: "json",
                            success: function (result) {
                                console.log("结果：========", result);
                                if (result.returnCode == 0) {
                                    layer.msg("保存成功", {
                                        time: 500
                                    })
                                    setTimeout(function () {
                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index); //再执行关闭);
                                    },1000)
                                } else {
                                    layer.msg(result.codeDesc);
                                }

                            },
                            error: function (result) {
                                layer.msg("接口调用异常!");
                            }

                        });
                    } else {  //新增
                        var data = JSON.stringify(this.saveForm);
                        console.log("data===", data);
                        self.$refs[name].validate((valid) => {
                            console.log("valid===", valid);
                            if (valid) {
                                self.saveForm.opType = 1;
                                this.saveForm.stationSeniority = editor1.txt.html();
                                this.saveForm.stationDuty = editor2.txt.html();
                                self.saveForm.createName = preCreateName;
                                var data = JSON.stringify(this.saveForm);
                                console.log("====获取到的值是", data);
                                $.ajax({
                                    type: "POST",
                                    url: basePath + "/recruit/addOrEditRecruit",
                                    contentType: "application/json; charset=utf-8",
                                    async: false,
                                    data: data,
                                    dataType: "json",
                                    success: function (result) {
                                        console.log("结果：========", result);
                                        if (result.returnCode == 0) {
                                            layer.msg("保存成功", {
                                                time: 500
                                            })
                                            setTimeout(function () {
                                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                                parent.layer.close(index); //再执行关闭);
                                            },1000)
                                        } else {
                                            layer.msg(result.codeDesc);
                                        }

                                    },
                                    error: function (result) {
                                        layer.msg("接口调用异常!");
                                    }

                                });
                            } else {
//                                layer.msg("缺少必要参数");


                                return false;
                            }
                        })
                    }
                },
                closeOpt: function () {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },


            },


            mounted: function () {
                this.init();
            },

        });
    });
    //


</script>

</body>
</html>